<template>
  <div class="">
    <ul class="pager">
      <span @click="min"><</span>
      <li
        v-for="count in total / pageSize"
        :key="count"
        @click="change(count)"
        :class="{ active: count == pagenum }"
      >
        {{ count }}
      </li>
      <span @click="add">></span>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
    },
    pageSize: {
      type: Number,
    },
    pageNum: {
      type: Number,
    },
  },
  data() {
    return {
      pagenum: 0,
    };
  },
  mounted() {
    this.pagenum = this.pageNum;
  },
  methods: {
    change(i) {
      this.pagenum = i;
      this.$emit("currentChange", i);
      console.log(i);
    },
    min() {
      this.pagenum--;
      if (this.pagenum < 1) {
        this.pagenum = 1;
        return false;
      }

      this.$emit("currentChange", this.pagenum);
    },
    add() {
      this.pagenum++;
      if (this.pagenum > this.total / this.pageSize) {
        this.pagenum = this.total / this.pageSize;
        return false;
      }

      this.$emit("currentChange", this.pagenum);
    },
  },
};
</script>

<style lang="scss" scoped>
.pager {
  display: flex;
  width: 60%;
  .active {
    background-color: #409eff;
    color: #fff;
  }
  li,
  span {
    flex: 1;

    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
    padding: 0 4px;

    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
  }
}
</style>
